<template>
    <div>
        <!-- vuex在vue3中的使用 -->
        <h2>vuex在vue3中的使用</h2>
         <!-- 
           vue是单向数据流吗？
         -->
         <p>用户名：{{name}}</p>
         <p>年龄：{{age}}</p>
         <p>性别：{{sex}}</p>
         <p>token: {{token}}</p>
         <button @click="changeName">修改name</button>
         <button @click="loginTo">触发actions-更新token</button>
        <h2>数据持久化</h2>
    </div>
</template>
<script setup lang='ts'>
import { toRefs } from 'vue';
import { useStore } from 'vuex'
let store = useStore()

const {  name, age, sex, token } = toRefs(store.state.user)
console.log('store', store)

// 修改状态 name
const changeName = () => {
    console.log('store', store.state)
    store.commit('user/SET_NAME', 'admin000')
}

// 点击登录
const loginTo = () => {
    store.dispatch('user/Login', { username: 'admin', pass: 'admin' })
}

</script>


<style lang='scss' scoped>

</style>